<template>
  <div :class="$style.wrap">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="title" label="评分表名称">
            <el-input v-model="formData.title" placeholder="请输入评分表名称" clearable></el-input>
          </el-form-item>
          <el-form-item prop="state" label="状态">
            <el-select v-model="formData.state" placeholder="请选择状态" clearable filterable>
              <el-option v-for="(s,i) in stateList" :key="i" :value="s.dictCode" :label="s.dictName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="createTime" label="创建时间">
            <el-date-picker v-model="formData.createTime" opt operator=">" :limite="new Date()" format="yyyy-MM-dd" type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="-">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <Button type="primary" @click="resetHandle">重置</Button>
            <Button type="primary" enter @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <div class="button-container" style="padding-top:0">
        <PreviewDialog :selection-list="selectionList"></PreviewDialog>
        <PsqTitle @on-success="addHandle"></PsqTitle>
        <!-- <PsqTitle :selection-list="selectionList" text="编辑" is-edit @on-success="id=>addHandle(id, 'onPage')"></PsqTitle> -->
        <Button type="primary" @click="editHandle">编辑</Button>
        <Button type="primary" @click="delHandle">删除</Button>
        <Button type="primary" @click="releaseHandle">发布</Button>
      </div>
      <table-box ref="table" no-request :other-filters="otherFilters" :table-config="tableConfig" :selected-arry.sync="selectionList" @selection-change="selectionChangeHandle">
        <el-table-column slot="before" type="index" align="center" label="序号" width="50"></el-table-column>
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import PsqTitle from './components/psqTitle'
import PreviewDialog from './components/previewDialog'
import { parseTime } from '@/utils'
import { questionnaireDelet, questionnaireRelease } from '@/api/questionnaire'
export default {
  name: 'EvaluateManage',
  components: {
    ContentWrap,
    FormContainer,
    PsqTitle,
    PreviewDialog
  },
  data() {
    return {
      formData: {
        title: '',
        state: '',
        questionnaireSort: 1,
        createTime: []
      },
      formRules: {},
      // 状态
      stateList: [
        { dictCode: '', dictName: '全部' },
        { dictCode: '0', dictName: '未发布' },
        { dictCode: '1', dictName: '已发布' }
      ],
      tableConfig: {
        interfacePath: '/call-center/api/v1/questionnaire/page',
        hideFuncBar: true,
        sort: 'createTime',
        order: 'desc',
        setting: [
          {
            label: '评分表名称',
            prop: 'title',
            minWidth: 120
          },
          {
            label: '评分项数量',
            prop: 'questionAmount',
            minWidth: 120
          },
          {
            label: '评分表状态',
            prop: 'state',
            minWidth: 120,
            formatData: v => {
              return this.getStateName(v.state)
            }
          },
          {
            label: '所属组织',
            prop: 'deptName',
            minWidth: 120
          },
          {
            label: '创建人',
            prop: 'createBy',
            minWidth: 140,
            formatData: v => {
              return `${v.createByName}(${v.createBy})`
            }
          },
          {
            label: '创建时间',
            prop: 'createTime',
            type: 'date',
            minWidth: 140,
            formatData: v => {
              return parseTime(v.lastUpdateTime)
            }
          },
          {
            label: '最后修改人',
            prop: 'lastUpdateBy',
            minWidth: 140,
            formatData: v => {
              return `${v.lastUpdateByName}(${v.lastUpdateBy})`
            }
          },
          {
            label: '最后修改时间',
            prop: 'lastUpdateTime',
            type: 'date',
            minWidth: 140,
            formatData: v => {
              return parseTime(v.lastUpdateTime)
            }
          }
        ]
      },
      otherFilters: [],
      selectionList: []
    }
  },
  methods: {
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        const eq = this.$genRule('=', ['state', 'questionnaireSort'])
        const otherFilters = this.$genOtherFilters(this.formData, eq)
        this.otherFilters = otherFilters
        if (type !== 'import') {
          this.refreshTable(type)
        }
        return otherFilters
      })
    },
    resetHandle() {
      this.$refs.form.resetFields()
    },
    refreshTable(type) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(type)
      })
    },
    // 状态名称
    getStateName(v) {
      if (v === undefined || v === null) {
        return ''
      }
      v = v.toString()
      for (const state of this.stateList) {
        if (v === state.dictCode.toString()) {
          return state.dictName
        }
      }
    },
    selectionChangeHandle(v) {
      alert('sadsada')
      this.selectionList = v
    },
    // 新增
    addHandle(id, onPage) {
      this.$router.push({ name: 'InsQuestionnaire', params: { id }})
      this.refreshTable(onPage)
    },
    // 编辑
    editHandle() {
      return this.$checkSelected(this.selectionList).then(() => {
        if (this.checkState()) {
          this.$message.warning('评分表已发布，不能编辑！')
        } else {
          this.$router.push({ name: 'InsQuestionnaire', params: { id: this.selectionList[0].id }})
        }
      })
    },
    // 发布状态判断
    checkState() {
      const state = this.selectionList[0].state
      return state === '1' || state === 1
    },
    // 删除
    delHandle() {
      return this.$checkSelected(this.selectionList).then(() => {
        if (this.checkState()) {
          this.$message.warning('评分表已发布不能删除！')
        } else {
          return this.$msgbox({
            title: '提示',
            message: '确认删除？',
            showCancelButton: true,
            type: 'warning'
          }).then(() => {
            return questionnaireDelet(this.selectionList[0].id).then(res => {
              this.$message.success('删除成功！')
              this.refreshTable('onPage')
            })
          })
        }
      })
    },
    // 发布
    releaseHandle() {
      return this.$checkSelected(this.selectionList).then(() => {
        if (this.checkState()) {
          this.$message.warning('评分表已经发布！')
        } else {
          return this.$msgbox({
            title: '提示',
            message: '确认发布？',
            showCancelButton: true,
            type: 'warning'
          }).then(() => {
            return questionnaireRelease(this.selectionList[0].id).then(res => {
              this.$message.success('发布成功！')
              this.refreshTable('onPage')
            })
          })
        }
      })
    }
  }
}
</script>
<style lang='scss' module>
.warp{

}
</style>
